<template>
	<view>
		<view class="relocation-content">
			<view class="relo-header">
				<uni-forms ref="form" :modelValue="params" :label-width="50">
					<uni-forms-item label="托盘条码" name="contNo" :label-align="labelAlign" :label-width="70">
						<uni-easyinput ref="inputSelect" size="small" id="inputSelect" focus suffixIcon="search"
							trim="all" @focus="_inputFocus" v-model="params.contNo" maxlength="8" placeholder="请输入托盘条码"
							confirm-type="search" @confirm="handleSearch()" @iconClick="handleSearch"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="器材代码" name="spuNo" :label-align="labelAlign" :label-width="70">
						<uni-easyinput v-model="params.spuNo" placeholder="器材代码"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="数量" name="actlQty" :label-align="labelAlign" :label-width="70">
						<uni-easyinput v-model="params.actlQty" type="number" maxlength="3"
							placeholder="请输入数量"></uni-easyinput>
					</uni-forms-item>
				</uni-forms>
			</view>
			<swiper class="relo-text" :current="currentIndex" :duration="500" @change="currentChange">
				<swiper-item v-for="item in listData" :key="item.taskId" class="form-swiper">
					
					<uni-row class="swiper-item">
						<uni-col :span="24">
							<text>托盘条码：</text>
							<view class="swiper-content">
								{{item.contNo}}
							</view>
						</uni-col>
					</uni-row>
					<uni-row class="swiper-item">
						<uni-col :span="24">
							<text>物料编号：</text>
							<view class="swiper-content">
								{{item.spuNo}}
							</view>
						</uni-col>
					</uni-row>
					<uni-row class="swiper-item">
						<uni-col :span="24">
							<text>物料名称：</text>
							<view class="swiper-content">
								{{item.spuName}}
							</view>
						</uni-col>
					</uni-row>
					<uni-row class="swiper-item">
						<uni-col :span="12">
							<text>尺寸：</text>
							<view class="swiper-num">
								{{item.spuSize}}mm
							</view>
						</uni-col>
						<uni-col :span="12">
							<text>已收磅重：</text>
							<view class="swiper-num">
								【{{item.planQty}}】
							</view>
						</uni-col>
					</uni-row>
					<uni-row class="swiper-item">
						<uni-col :span="24">
							<text>收货日期：</text>
							<view class="swiper-des">
								{{item.createDate}}
							</view>
						</uni-col>
					</uni-row>
				</swiper-item>
			</swiper>
			<uni-pagination :show-icon="true" :total="total" :pageSize="1" :current="currentIndex + 1" title="标题文字"
				@change="handleChange" />
		</view>
		<button type="primary" class="next" @click="confirm">托盘绑定</button>
	</view>
</template>

<script>
	import {
		residualConfirm,
		taskSearch
	} from '@/api/request.js'
	import {
		rules
	} from '../config/form.js'
	export default {
		name: 'rf-form',
		props: {
			formData: {
				type: Object | Array,
				require: true
			}
		},
		data() {
			return {
				listData: [],
				weightUnit: 'kg',
				params: {
					contNo: '',
					spuNo: '',
					spuSize: '',
					actlQty: '',
					stationNo: '',
					limit: 100,
					page: 1,
				},
				labelAlign: 'right',
				total: 1,
				toLpn: '',
				currentIndex: 0,
				rules: rules,
				range: [
					{ value: '1F_IN_ST11', text: "1F_IN_ST11" },
					{ value: '1F_OUT_ST11', text: "1F_OUT_ST11" },
					{ value: '1F_OUT_ST12', text: "1F_OUT_ST12" }
				],
			};
		},
		methods: {
			confirm() {
				uni.showLoading()
				residualConfirm(this.params, (res) => {
					if (res.code == 0) {
						uni.showModal({
							title: '提示',
							content: res.data,
							showCancel: false,
							duration: 1000,
							success: () => {
								this.params.page = 1
								this.params.spuNo = ''
								this.params.actlQty = ''
								this.params.spuSize = ''
								this.query()
							}
						});
					} else {
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							duration: 1000
						});
					}
				})
			},
			// 轮播下标更新
			currentChange({
				detail
			}) {
				this.currentIndex = detail.current
			},
			// 输入框聚焦全选
			_inputFocus(event) {
				document.querySelector('#inputSelect input').select()
			},
			handleChange(e) {
				this.currentIndex = e.current - 1
				// this.query()
			},
			// 搜索按钮点击
			handleSearch() {
				if (!this.params.contNo) {
					return
				}
				this.query()
			},
			// 搜索列表
			query(reflash) {
				uni.showLoading()
				taskSearch(this.params, (res) => {
					console.log(res.data.list)
					if (res.code === 0 && res.data && res.data.list.length) {
						this.listData = res.data.list
						this.total = res.data.total
						this.weightUnit = this.listData[this.currentIndex].unitCode
					} else {
						this.listData = {}
						
					}
				})
			},
		}
	}
</script>
<style scoped lang="scss">
	.unit {
		margin-right: 5px;
	}
	::v-deep .is-disabled {
		color: black;
	}

	::v-deep .uni-forms-item__content {
		display: flex;
	}

	.relo-header {
		// display: block !important;
		width: initial;
		padding-bottom: 0 !important;

		// margin: 0 auto;
		.header-con {
			display: flex;
			align-items: center;
			margin-top: 10px;
			// margin: 0 auto;
		}
	}
</style>